For this project, I will create the UI for a new banking application, and we will focus on the UI part of the prototype. "Banka" will be the chosen name for our bank and I will design polished user interfaces for desktop, tablet and mobile. Used Softwares: Figma, Adobe Photoshop, Adobe Illustrator.
I started my project by creating a mood-board to choose the tone, the personality and the values of the brand. Gathering research and inspiration helps me to communicate the qualities of the brand. I was looking for others products that communicates these specific qualities:
In addition to these moodboards, I selected some typos, some interactive states that I liked, colour palettes and many other components to explore ideas for my designs.
As I gather inspiration and add it to my mood boards, I also explored ideas for my designs.
In order to get a proper palette, I used an online tool that helped me choose palettes and complementary colours, called Adobe Color. I have also explored some design systems by Google, Workday and IBM to see how they present their palettes.
For this project, I was given the task for designing responsive banking application for 3 different screens focusing on the UI part of the process. I started by sketching my screens following the Design Principles. For my first screens, I've been using some overlapping elements to show they are integrated and connected together. Combined with rounded corners, these elements creates an interesting layout that is easy to scan. More design principles were used like proximity, grouping and chunking to make dense information much easier to scan and digest.
I chose these free icons for my prototype, they are simple, clear and go with my app style. Mixed with the main icons I have designed, they are all consistent in style.
Layout screens effectively and consistently is integral to good UI design. For this project, I set up grids for each device size like so: 8pt grid for each screen size, 12 columns grid for desktop, 8 column grid for tablet and 4 columns for mobile. Considering the margins, paddings, gutters and column size helps us to design easily and properly.
In order to design a responsive application, I designed every screen separately and worked for the layout for mobile, tablet and desktop at the same time to keep a visual consistency.